<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码复用</title>
    <!-- 页面间复用!使用link命令 -->
    <link rel="stylesheet" href="2.6 页面间复用样式表实例.css">
    <style>
        /* DIY原则，意思是Do nt repeat yourself！不要做重复的事情！ */
        .btn{
            width: 50px;
            height: 30px;
            background-color: blue;
            color: aliceblue;
            border: none;
            border-radius: 4px;
            padding: 3px;
        }
        .btn1{
            width: 50px;
            height: 30px;
            background-color: brown;
            color: aliceblue;
            border: none;
            border-radius: 4px;
            padding: 3px;
        }
        /* 这样十分难以维护 */
        /* 工具化特征 */
        .btn13{
            width: 50px;
            height: 30px;
            color: aliceblue;
            border: none;
            border-radius: 4px;
            padding: 3px;
        }
        /* 个性化特征 */
        .btn12{
          
            background-color: brown;
          
        }
        .btn22{
           
            background-color: brown;
          
        }
    </style>
</head>
<body>
    <button class="btn">save</button>
    <button class="btn btn1">update</button>
    <!-- 这种做法合理的多,可以用空格组装链接的类选择器十分好用 -->
    <button class="btn13">save</button>
    <button class="btn13 btn12">update</button>
    <button class="btn13 btn22">delete</button>
    <!-- 页面间使用css样式表复用代码 -->
    <button class="btna">save</button>
    <button class="btna btnb">update</button>
    <button class="btna btnc">delete</button>
    <style>
        nav{
            background-color: black;
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 5px;
        }
        nav a{
            text-decoration: none;
            color: aliceblue;
            padding: 15px 30px;
       
        }
    </style>
    <nav>
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
    </nav>
</body>
</html>